<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle">
    <el-form
      ref="formRef"
      v-loading="formLoading"
      :model="formData"
      :rules="formRules"
      label-width="80px"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="工厂" prop="factory">
            <el-input v-model="formData.factory" clearable value="BH" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="流水号" prop="serialNum">
            <el-input v-model="formData.serialNum" clearable placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="生产日期" prop="manufacDate">
            <el-date-picker
            v-model="formData.manufacDate"
            value-format="YYYY-MM-DD"
            type="date"
            start-placeholder="日期"
            class="!w-270px"
          />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script lang="ts" setup>
  import * as materialPickApi from '@/api/hcxly/materialPick/Index'
  import { FormRules } from 'element-plus'
  import { getLodop } from '@/utils/LodopFuncs' //导入打印模块

  defineOptions({ name: 'printForm' });

  const { t } = useI18n() // 国际化
  const message = useMessage() // 消息弹窗

  const router = useRouter() // 路由
  const dialogVisible = ref(false) // 弹窗的是否展示
  const dialogTitle = ref('') // 弹窗的标题
  const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
  const formType = ref('') // 表单的类型：create - 新增；update - 修改
  const formData = ref({
    factory: 'BH',
    manufacDate: '',
    serialNum: ''
  })
  const list = ref([])
  //打开弹窗
  const open = async (row) => {
    dialogVisible.value = true
    dialogTitle.value = t('打印内码')
    list.value = row
    // formData.value.flex = row.flex
    // formData.value.len = row.len
    // formData.value.type = row.type
    // formData.value.code = row.code
    // formData.value.materialStatus = row.materialStatus
  }
  defineExpose({ open }) // 提供 open 方法，用于打开弹窗

  //表单验证
  const formRules = reactive<FormRules>({
    factory: [{ required: true, message: '工厂不能为空', trigger: 'blur' }],
    manufacDate: [{ required: true, message: '生产日期不能为空', trigger: 'blur' }],
    serialNum: [{ required: true, message: '流水号不能为空', trigger: 'blur' }]
  })

  const formRef = ref() // 表单 Ref
  /** 提交表单 */
  const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
  const submitForm = async () => {

    
    // 校验表单
    if (!formRef) return
    const valid = await formRef.value.validate()
    if (!valid) return
    // 提交请求
    formLoading.value = true
    try {
      // const data = formData.value as unknown as materialPickApi.materialPickVO
      // console.log(data)
      // await materialPickApi.materialPickEdit(data)
      
      printHandle()
      // message.success(t('信息完善成功'))
      dialogVisible.value = false
      // 发送操作成功的事件
      emit('success')
      resetForm()
    } finally {
      formLoading.value = false
    }
  }

    /** 打印按钮操作 */
    const printHandle = async () => {
      // console.log(list.value)
      // console.log(formData.value.factory)
      // console.log(formData.value.serialNum)
      // console.log(formData.value.manufacDate)
      let LODOP = getLodop()  //调用getLodop获取LODOP对象
　　　LODOP.PRINT_INIT("")  //打印初始化
      LODOP.SET_PRINT_PAGESIZE(0, 1000, 460, "内码打印"); //设定纸张大小
      // LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", "30%"); //设置缩放
      // LODOP.SET_PREVIEW_WINDOW(2, 2, 0, 0, 0, ""); //设置窗口
　　　 const serialCount = ref(0)
       for(let i in list.value){
        serialCount.value = Number(formData.value.serialNum) + Number(i)
        // console.log(Number(formData.value.serialNum)+Number(i))
        console.log(list.value[i])
        LODOP.ADD_PRINT_TEXT(20, 0, '100%', '100%', list.value[i].flex) //打印文本
        LODOP.SET_PRINT_STYLEA(0,"FontSize",16)
        LODOP.SET_PRINT_STYLEA(0,"Alignment",2)
        LODOP.ADD_PRINT_LINE(55, 0, 55, 400, 0, 1); //线，横杠(上边距1,1左边距,上边距2,2左边距,intLineStyle, intLineWidth)
        LODOP.ADD_PRINT_TEXT(80, 20, 260, 50, formData.value.factory+'  '+(list.value[i].len === null?'':list.value[i].len)+'"'+serialCount.value) //打印文本
        LODOP.SET_PRINT_STYLEA(0,"FontSize",14)
        // LODOP.ADD_PRINT_TEXT(50, 20, 260, 50, '物料编码：'+item.materialCode)
        // LODOP.SET_PRINT_STYLEA(0,"FontSize",14)
        LODOP.ADD_PRINT_TEXT(120, 20, 260, 39, (list.value[i].orderType === '选手'?'选':'')+' '+formData.value.manufacDate.slice(5, 10))
        LODOP.SET_PRINT_STYLEA(0,"FontSize",14)
        LODOP.ADD_PRINT_BARCODE(65,250,100,100,'QRCode',list.value[i].id) //打印二维码
        LODOP.NEWPAGE();
       }
　　　 LODOP.PREVIEW()
　　　　　　//LODOP.PRINT()

  }

  /** 重置表单 */
  const resetForm = () => {
    formData.value = {
      factory: '',
      manufacDate: '',
      serialNum: ''
    }
    formRef.value?.resetFields()
  }
</script>
